<template>
  <section>
    <map-dialog
      :visible="visible"
      :title="title"
      :show-back="showBack"
      :z-index="1000"
      @back="handleBack"
      @close="handleClose"
      @closed="handleClosedDialog"
      style="width: 340px;">
      <section>
        <map-selection-overview
          :visible="overViewVisible"
          :selection="selection"
          @rowClick="handleOverviewChose">
        </map-selection-overview>

        <map-selection-staff
          :visible="visibleOption.staff"
          :ids="selection.staff"
          @position="handlePosition">
        </map-selection-staff>

        <map-selection-case
          :visible="visibleOption.case"
          :ids="selection.case"
          @position="handlePosition">
        </map-selection-case>

        <map-selection-video
          :visible="visibleOption.video"
          :ids="selection.video"
          @position="handlePosition">
        </map-selection-video>

        <map-selection-car
          :visible="visibleOption.car"
          :ids="selection.car"
          @position="handlePosition">
        </map-selection-car>

      </section>
    </map-dialog>
  </section>
</template>

<script>
  import mapDialog from './map-dialog'
  import mapSelectionOverview from './map-selection-overview'
  import mapSelectionStaff from './map-selection-staff'
  import mapSelectionCase from './map-selection-case'
  import mapSelectionVideo from './map-selection-video'
  import mapSelectionCar from './map-selection-car'
  export default {
    name: 'map-selection',
    components: {
      mapDialog,
      mapSelectionOverview,
      mapSelectionStaff,
      mapSelectionCase,
      mapSelectionVideo,
      mapSelectionCar
    },
    props: {
      visible: {
        type: Boolean,
        default: false
      },
      map: {
        type: Object,
        default: () => {
          return {}
        }
      },
      selection: {
        type: Object,
        default: () => {
          return {
            staff: [],
            case: [],
            car: [],
            video: []
          }
        }
      }
    },
    data() {
      return {
        overViewVisible: true,
        showBack: false,
        visibleOption: {
          staff: false,
          car: false,
          video: false,
          case: false
        },
        title: '框选结果'
      }
    },
    methods: {
      /**
       * @Author ling.yuan@topevery.club
       * @Date 2019/12/12 16:26:44
       * @Description 关闭框选 
       */
      handleClose() {
        this.$emit('close')
      },
      /**
       * @Author ling.yuan@topevery.club
       * @Date 2019/12/12 16:26:54
       * @Description 返回框选总览 
       */
      handleBack() {
        this.closeBackAndShowOverview()
      },
      /**
       * @Author ling.yuan@topevery.club
       * @Date 2019/12/12 16:27:09
       * @Description 关闭框选总览, 展示具体框选内容 
       */
      handleOverviewChose(event, title) {
        this.showBackAndCloseOverview()
        this.title = title
        this.visibleOption[event] = true
      },
      /**
       * @Author ling.yuan@topevery.club
       * @Date 2019/12/12 16:27:24
       * @Description 显示返回并关闭框选总览 
       */
      showBackAndCloseOverview() {
        this.showBack = true
        this.overViewVisible = false
      },
      /**
       * @Author ling.yuan@topevery.club
       * @Date 2019/12/12 16:27:41
       * @Description 关闭返回, 打开框选总览, 修改标题 
       */
      closeBackAndShowOverview() {
        this.showBack = false
        this.overViewVisible = true
        this.title = '框选结果'
        for (const item in this.visibleOption) {
          this.visibleOption[item] = false
        }
      },
      /**
       * @Author ling.yuan@topevery.club
       * @Date 2019/12/12 16:28:08
       * @Description 定位 
       */
      handlePosition(item, target) {
        this.$emit('position', item, target)
      },
      handleClosedDialog() {

      }
    }
  }
</script>

<style scoped>

</style>
